<template>
  <div class="progress">
    <el-progress
        :color="progressData.color"
        :percentage="progressData.percentage"
        :show-text="false"
        :stroke-width="20"
        :text-inside="true"
    >
    </el-progress>
    <div class="statusName">
      {{ progressData.statusName }}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    statusName: [String],
    statusCode: [String],
    progress: [Number],
    taskName: [String],
  },
  data() {
    return {
      colorMap: {
        WAITING: "#409EFF",
        DEPLOYING: "#409EFF",
        DEPLOY_SUCCESS: "#67C23A",
        DEPLOY_FAIL: "#F56C6C",
      },
    };
  },
  computed: {
    progressData() {
      let percentage = 0;
      let statusName = this.statusName;
      if (
          this.statusCode == "DEPLOY_SUCCESS" ||
          this.statusCode == "DEPLOY_FAIL"
      ) {
        percentage = 100;
      }
      if (this.progress && this.statusCode == "DEPLOYING") {
        percentage = this.progress;
        statusName += "[" + this.taskName + "]" + percentage.toFixed(1) + "%";
      }
      return {
        percentage: percentage,
        color: this.colorMap[this.statusCode],
        statusName: statusName,
      };
    },
  },
};
</script>
<style scoped>
.progress {
  position: relative;
}

.statusName {
  font-size: 10px;
  line-height: 10px;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 6px;
  color: #606266;
}
</style> 

